<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>事件修饰符</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        <h2>.prevent</h2>
        <!-- a 链接会默认跳转到指定 url -->
        <a href="https://www.baidu.com/" @click="showInfo">click me</a>
        <!-- .prevent 修饰符可以阻止默认行为 -->
        <a href="https://www.baidu.com/" @click.prevent="showInfo">click me</a>

        <h2>.stop</h2>
        <!-- .stop 修饰符可以阻止事件冒泡 -->
        <div style="background: skyblue; padding: 10px;" @click="handleParent">
            <button @click.stop="handleChild">click me</button>
        </div>

        <h2>.once</h2>
        <!-- .once 修饰符让事件只触发一次 -->
        <button @click.once="showInfo">click me</button>

        <h2>.capture</h2>
        <!-- .capture 修饰符触发事件的捕获阶段，而不触发冒泡阶段 -->
        <div style="background: skyblue; padding: 10px;" @click.capture="showMsg('parent')">
            <button @click="showMsg('child')">click me</button>
        </div>

        <h2>.self</h2>
        <!-- 只有 event.target 是当前操作的元素时才触发事件 -->
        <div style="background: skyblue; padding: 10px;" @click.self="showMsg('parent')">
            <button @click="showMsg('child')">click me</button>
        </div>

        <h2>.passive</h2>
        <!-- 当触发事件时，会先执行事件回调，等回调执行完毕，再执行默认行为 -->
        <!-- .passive 可以让事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <!-- 但是注意，不是所有事件都需要使用 .passive 修饰符 -->
        <!-- 如以下示例，使用 wheel 事件就会先执行回调，后执行默认行为（滚动滚动条） -->
        <!-- 给 wheel 事件使用 .passive 修饰符后，就可以直接滚动滚动条，无需等待事件回调执行完毕 -->
        <!-- 但使用 scroll 事件，就无需使用 .passive 修饰符，即可实现 @wheel.passive 的效果 -->
        <!-- @scroll="handleScroll" -->
        <ul style="height: 100px; background: skyblue; overflow-y: auto;" @wheel.passive="handleScroll">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {},
            methods: {
                showInfo() {
                    alert('Hello')
                },
                handleParent() {
                    alert('父元素触发事件')
                },
                handleChild() {
                    alert('子元素触发事件')
                },
                showMsg(msg) {
                    console.log('msg:', msg)
                },
                handleScroll() {
                    for (let i = 1; i <= 10000; i++) {
                        console.log(i)
                    }
                }
            }
        })
    </script>

</body>
</html>